<template>
	<div class="selfBulidingPage">
		<div class="note" :style ="note">
			<div class="inform">
				<span>自身建设</span>
			</div>
		</div>
		<Loading v-if="notMore" class="empty-text-wrap"/>
		<mu-load-more  @load="load" :loading="loading">
			<div class="list">
				<div class="bar"  v-for="(item,index) in infos" :key="index" @click="oneselfDetails(item)">
					<!--<img class="bq" src="@as/img/zuzhi_wode_cc@2x.png" alt="">-->
					<div class="step1">
						<div class="title">
							<span>{{item.title}}</span>
						</div>
					</div>
					<div class="step2">
						<div class="lfx">
							<img src="@as/img/zuzhi_wode_bq@2x.png" alt="">
							<span>{{item.name}}</span>
						</div>
						<div class="rf">
							<span>{{(item.create_time) | time}}</span>
						</div>
					</div>
				</div>
			</div>
		</mu-load-more>
		<div class="loading" v-if="loadOver" :class="{'notPageOne':p>1||infos.length<5}">{{loaded}}</div>
	</div>
</template>

<script>
    import Loading from '@/components/emptyText.vue';
    export default {
        components: {
            Loading
        },
        data() {
            return {
                loaded:'加載更多...',
                notMore:false,
				loading:false,
				loadOver:false,
                p:1,
                page:5,
                eid:'',
                infos:[],
                note: {
                    backgroundImage: "url(" + require("@as/img/zuzhi_wode_js@2x.png") + ")",
                    backgroundRepeat: "no-repeat",
                    backgroundSize: "100% ",
                },
            }
        },
        mounted() {
            this.$progress.done();
            this.getList(this.p);
        },
        methods: {
            oneselfDetails:function(item){
                this.$router.push({ path: '../organization/oneselfDetails' , query: item })
            },
            getList(p) {
                let that = this;
                that.$http
                    .get("/app/Construction/index", {
                        uid: JSON.parse(Cookies.get('user_71ydj')).id,
                        p:p,
                        page:that.page,
                        class_id:that.eid,
                        org_id:JSON.parse(Cookies.get('user_71ydj')).organization_id,
                    })
                    .then(res => {
                        if (res.data.length) {
                            // that.info = res.data.moral_index
                            console.log(res.data)
                            that.infos.push(...res.data);
                        }
                        this.loadOver = false;
                        if (this.p != 1) {
                            console.log(res.data);
                            if (res.data.length) {
                                console.log(res.data)
                            } else {
                                this.loadOver = true;
                                this.loading = false;
                                this.loaded = '没有更多数据了'
                                return false
                            }
                        } else {
                            if (!res.data.length) {
                                this.notMore = true;
                                this.loadOver = false;
                            } else {
                                if (res.data.length < 5 && res.data.length != 0) {
                                    this.loadOver = true;
                                    this.loaded = '没有更多数据了';
                                    this.notMore = false;
                                }
                            }
                        }


                        // if (res.data.length == 0) {
                        //     that.loaded = "没有更多";
                        //     that.loading = true;
                        //     that.notMore = false;
                        //     return;
                        // }
                        //
                        // that.infos = res.data;
                        // if (res.data.length < 10) {
                        //     that.loaded = "没有更多了";
                        //     that.notMore = false;
                        //     return;
                        // }
                    });
            },
            load() {
                if (!this.loadOver) {
                    this.loading = true;
                    clearTimeout(this.method);
                    this.method = setTimeout(() => {
                        this.p = this.p + 1;
                        this.getList(this.p);
                        this.loading = false;
                    }, 500);
                }
                // this.loading = true;
                // if (this.notMore) {
                //     clearTimeout(this.method);
                //     this.method = setTimeout(() => {
                //         this.p = this.p + 1;
                //         this.getList(this.p);
                //     }, 500);
                // }
            },
        },
        created(){
            this.eid = this.$route.query.id;
            // this.getList()
        }
    }
</script>

<style scoped>
	/*.mu-load-more{*/
		/*min-height:100vh;*/
		/*overflow: auto !important;*/
		/*padding: 0 0 15px 0!important;*/
	/*}*/
</style>
<style scoped lang="scss">
	// flex_between 两端对齐
	@mixin flex_between{
		isplay: flex;
		justify-content: space-between;
		align-items: center;
	}
	.note{
		padding: 38px 15px 15px 15px;
		box-sizing: border-box;
		width:100%;
		height:156px;
		position: relative;
		.back{
			width:100%;
			display: flex;
			justify-content: flex-start;
			img{
				width:12px;
				height:21.5px;
			}
		}
	}
	.inform{
		width:100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 25px;
		span{
			font-size: 28px;
			color:#000;
			font-weight: bold;
		}
	}
	.list{
		width:100%;
		padding: 0 15px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		/*position: absolute;*/
		left: 0;
		top:120px;
		z-index: 999;
		.bar{
			width:100%;

			box-shadow: 0px 6px 15px 2px #f1f1f1;
			padding: 20px 20px;
			position: relative;
			margin-bottom: 15px;
			background: #fff;
			border-radius: 5px;
			position: relative;
			&:after{
				position: absolute;
				content: '';
				width:4px;
				height:26px;
				background:rgba(244,117,72,1);
				border-radius:0px 3px 3px 0px;
				left: 0;
				top: 20px;
			}
			.bq{
				position: absolute;
				left:0;
				top:20px;
				width:4.5px;
				height:29px;
			}
			.step1{
				width:100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 14px;
				/*padding: 10px 0;*/
				box-sizing: border-box;
				margin-bottom: 16px;
				margin-top: 6px;
				.time{
					width:100%;
					display: flex;
					justify-content: flex-start;
					span{
						font-size: 14px;
						display: inline-block;
						height:26px;
						color:rgba(51,51,51,1);
					}
				}
				.title{
					width:100%;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
					line-height: 1;
					span{
						font-size: 14px;
						color: #333;
						display: inline-block;
						vertical-align: top;
					}
				}
			}
			.step2{
				width:100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 12px;
				// margin-top: 20px;
				.lfx{
					display: flex;
					align-items: center;
					img{
						width:17px;
						height:16.5px;
					}
					span{
						font-size: 12px;
						color:#ccc;
						margin-left: 3px;
					}
				}
				.rf span{
					font-size: 12px;
					color: #999;
				}
			}
		}
	}
	.loading {
		width: 100%;
		font-size: 14px;
		color: #dddddd;
		display: flex;
		align-items: center;
		justify-content: center;
		&.notPageOne {
			margin-top: -40px;
		}
	}

	.empty-text-wrap {
		width: 100%;
		height: 40vh;
		margin-top: 10vh;
	}

	.mu-load-more /deep/ .mu-circle-spinner{
		border-color: #e5e5e5;
	}
	.selfBulidingPage /deep/.mu-elevation-1{
		box-shadow: 0 0.05333rem 0.02667rem -0.02667rem rgba(0,0,0,0), 0 0.02667rem 0.02667rem 0 rgba(0,0,0,0), 0 0.02667rem 0.08rem 0 rgba(0,0,0,0); ;
		-webkit-box-shadow:0 0.05333rem 0.02667rem -0.02667rem rgba(0,0,0,0), 0 0.02667rem 0.02667rem 0 rgba(0,0,0,0), 0 0.02667rem 0.08rem 0 rgba(0,0,0,0); ;
	}
</style>